<template>
	<view class="box">
		  <u-navbar
		            title="租约"
		            placeholder
					 fixed
					 border	
		            @leftClick="leftClick"
		        >
		        </u-navbar>
		<view class="header">
			<view class="serch">
				<!-- 	<view class="name">
					<view>
			 
						{{ total }}
					</view>
	 
				</view> -->
				<u-search placeholder="请输入房源关键字" v-model="keyword" clearabled height="30" bgColor="#fff"
					@search="allLease" @custom="allLease" :actionStyle="{color: '#fff'}"></u-search>
				<!-- <u-icon name="search" color="#fff" size="28"></u-icon> -->
			</view>
			<view class="row">
				<view class="header_row" v-for="(item,index) in list" :key="index">
					<view :class="[active == index ? 'active': '']" @click="changeActive(index, item)">
						{{ item.title }}
					</view>
					<u-icon name="arrow-down" size="16"></u-icon>
				</view>
			</view>
		</view>
		<u-overlay :show="maskShow" @click="changeMask" zIndex="999" opacity="0" duration="0">
			<view class="option_box">
				<view class="option">
					<u-cell-group>
						<!-- 	<u-cell icon="setting-fill" title="个人设置"></u-cell>
							<u-cell icon="integral-fill" title="会员等级" value="新版本"></u-cell> -->
						<u-cell v-for="(item, index) of list[active || 0].children" :title="item.name"
							@click="sliceHouse(item,active,index)"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</u-overlay>
		<view class="padding">
			<view class="card" v-for="(leaseTtem,leaseIndex) in leaseList" :key="leaseIndex"
				@click="itemDetail(leaseTtem)">
				<view class="card_row">
					<view class="" style="width: 80%;">
						{{leaseTtem.houseRoomName}}
					</view>
					<view class="" style="width: 20%;">
						{{leaseTtem.tenantName}}
					</view>
				</view>
				<u-line></u-line>
				<view class="tiem">
					{{leaseTtem.beginDate}}/{{leaseTtem.endDate}}
				</view>
			</view>

		</view>
		<view class="empty" v-if="leaseList.length==0">
			<u-empty mode="data" text="暂无数据"></u-empty>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getLease
	} from '@/api/lease/index.js'
	export default {
		data() {
			return {
				total: 0,
				maskShow: false,
				active: undefined,
				actionStyle: {
					color: "#fff"
				},
				name: '汪小菲',
				keyword: "",
				qi: '32',
				// NOT_START("0","未开始"), IN_LEASE("1","租期中"),TERMINATED("2","已终止");
				list: [{
						title: '默认排序',
						children: [{
							name: '起租日期',
							id: "beginDate",
							index: 0
						}, {
							name: '签约日期',
							id: "signedOn",
							index: 1
						}]
					},
					{
						title: '租约状态',
						children: [{
							name: '未开始',
							id: 0
						}, {
							name: '租期中',
							id: 1
						}, {
							name: '已终止',
							id: 2
						}, ]

					}
				],
				leaseList: [],
				leaseState: 1,
				sortColumn: ""
			}
		},
		onPullDownRefresh() {
			this.active = undefined
			this.leaseState = 1;
			this.sortColumn = '';
			this.keyword = "",
			this.list[0].title = "默认排序";
			this.list[1].title = "租约状态";
			this.allLease()
			uni.stopPullDownRefresh();


			this.$refs.uToast.show({
				message: "刷新成功",
				position: "bottom",
				type: 'success',
				duration: 1000
			})
		},
		onShow() {
			this.allLease()
		},
		methods: {
			leftClick() {
				uni.switchTab({
					url:'/pages/my/my',
					fail() {
						this.$refs.uToast.show({
							message: '返回失败，请重新进入',
							type: 'error'
						})
					}
				})				
			},
			async allLease() {
				const res = await getLease(this.leaseState, this.sortColumn, this.keyword);
				if (res.data.code != 200) return this.$refs.uToast.show({
					message: res.data.msg,
					type: 'error'
				})
				this.total = res.data.total
				this.leaseList = res.data.rows
			},
			itemDetail(leaseTtem) {
				console.log(leaseTtem,'leaseTtem');
				uni.navigateTo({
					url: '/pages/my/lease/leaseDetail?id=' + leaseTtem.id,
				})
			},
			changeActive(index) {
				this.maskShow = true
				this.active = index
				// this.active = 
			},
			changeMask() {
				this.maskShow = false
				this.active = undefined
			},
			sliceHouse(item, active) {

				if (active == 0) {
					this.sortColumn = item.id,
						this.allLease()
				} else if (active == 1) {
					console.log(item);
					this.leaseState = item.id;

					this.allLease()
				}
				this.list[active].title = item.name

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.active {
		color: #3c9cff;
	}

	.empty {
		margin-top: 200rpx;
	}

	.option_box {
		padding-top: 174rpx;

		.option {

			background-color: #fff
		}

	}

	.box {
		background-color: $pagebgc;
		min-height: 100vh;
		max-height: 100%;
		box-sizing: border-box;

		.header {
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 333;
			margin-top: 80px;
			.serch {
				@include flexBetween;
				padding: 20rpx;
				font-size: 28rpx;
				color: #fff;
				font-weight: bold;
				background-color: $theme;
				box-sizing: border-box;

				.name {
					display: flex;
					align-items: center;
					width: 30%;
				}
			}

			.row {
				padding: 20rpx;
				font-size: 28rpx;
				background-color: #fff;
				border-bottom: #c8c8c8 solid 1rpx;

				z-index: 999999;
				@include flexBetween;
				color: $noimportant;

				.header_row {
					display: flex;
					align-items: center;
					padding: 0 60rpx;
				}

				.data {
					display: flex;
					align-items: center;
				}
			}
		}

		.padding {
			padding: 30rpx;
			font-size: 28rpx;
			color: $noimportant;
			padding-top: 180rpx;

			.card {
				background-color: #fff;
				border-radius: 3%;
				margin: 20rpx 0;

				@include boxshadow;

				.card_row {
					@include flexBetween;
					padding: 30rpx;
				}

				.tiem {
					padding: 30rpx;
				}

			}

		}
	}
</style>